<template>
  <div>
		<div class="backBtn" @click="$router.back(-1)">
			<i  class="icon iconfont icon-back"></i>
		</div>
		<van-index-bar class="indexBar" :sticky="false" highlight-color="#AE853A">
      <van-index-anchor v-for="(item,index) in cityDts.city" :key="index" :index="item.initial">
        <span class="indexWord">{{item.initial}}</span>
        <van-cell
          @click="chooseCity(citem)"
          v-for="(citem,cindex) in item.list"
          :key="cindex"
          :title="citem.name"
        />
      </van-index-anchor>
    </van-index-bar>
	</div>
</template>

<script>
import cityDts from "@/api/city.json";
import { CityListUrl } from "@/api/axiosFun";
import { Toast } from 'vant';

export default {
  name: "Index",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      bannerList: [],
      cityDts: cityDts,
      datalist: [],
      currentIndex: 1,
      page: 1,
      pageSize: 100,
      traderType: 1,
      nowMoney: "",
      cityId: "",
      orderNum: false,
      Latitude: "",
      Longitude: "",
      datainfo:{},
      payinfo:{},
      oid: ""
    };
  },
  created() {
   
  },
  mounted() {
    this.init();
    console.log(this.cityDts);
  },
  methods: {
    init() {
      CityListUrl({
          page:1,
          pageSize:1000
      }).then(res => {
        console.log(res);
        if (res.errCode == 0) {
          //this.bannerList = res.data;
        }
      });
    },
    chooseCity(item){
      console.log(item);
      this.$router.replace({ name: "index", params: { id: 1 } });
    }
   
    
    
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.backBtn {
    width: 1.25rem;
    height: 1.25rem;
    background: -webkit-gradient(linear,left top,right top,from(rgba(0,170,255,.5)),to(rgba(0,133,255,.5)));
    background: linear-gradient(90deg,rgba(0,170,255,.5),rgba(0,133,255,.5));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    position: fixed;
    top: .44rem;
    left: .44rem;
    z-index: 9999;
    border-radius: 50%;
    overflow: hidden;
}
.backBtn i {
    font-size: .64rem;
    font-weight: 700;
    color: #fff;
}
.mainWrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.mainWrap.paddingBtm {
    padding: 0 0 3.04rem;
}
.headContainer {
    position: relative;
    width: 100%;
    height: 3.32rem;
    margin-bottom: .3rem;
    background: #fff;
}
.headImg {
    width: 100%;
    height: 2.88rem;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.headImg .blurBg {
    width: 100%;
    height: 100%;
    background: inherit;
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -ms-filter: blur(4px);
    -o-filter: blur(4px);
    filter: blur(4px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4,MakeShadow=false);
}
.shopLogo {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: -1.25rem;
    border-radius: 9px;
    overflow: hidden;
}
.shopLogo img {
    width: 100%;
    height: 100%;
}
.section {
    padding: .4rem 0;
    margin-bottom: .16rem;
    background: #fff;
    position: relative;
}
.title {
    height: .88rem;
    line-height: .88rem;
    font-size: .55rem;
    color: #333;
    text-align: center;
    font-weight: 700;
}
.section-head {
    font-size: .41rem;
    color: #000;
    font-weight: 700;
    padding: .14rem .44rem;
}
.section-content.activity, .section-content.info {
    padding: 0 .44rem;
}
.activityBox {
    height: .75rem;
    line-height: .75rem;
}
.activityBox span {
    display: inline-block;
    padding-right: .2rem;
    color: #333;
    font-size: .33rem;
}
.activityBox .activityIcon {
    display: inline-block;
    background-color: #9c9c9c;
    border-radius: 3px;
    height: .48rem;
    line-height: .48rem;
    padding: .05rem .1rem;
    font-size: .3rem;
    color: #fff;
    text-align: center;
}
.activityBox i {
    font-style: normal;
}
.activityBox span {
    display: inline-block;
    padding-right: .2rem;
    color: #333;
    font-size: .33rem;
}
.activityBox .activityIcon {
    display: inline-block;
    background-color: #9c9c9c;
    border-radius: 3px;
    height: .48rem;
    line-height: .48rem;
    padding: .05rem .1rem;
    font-size: .3rem;
    color: #fff;
    text-align: center;
}
.activityBox i {
    font-style: normal;
}
.mainInner {
    padding: .16rem;
    background: -webkit-gradient(linear,left top,left bottom,from(#0085ff),to(#fff));
    background: linear-gradient(180deg,#0085ff,#fff);
}
.section {
    padding: .4rem 0;
    margin-bottom: .16rem;
    background: #fff;
    position: relative;
}
.section-content.activity, .section-content.info {
    padding: 0 .44rem;
}
.section-content.info li {
    padding: .4rem 0;
    height: .6rem;
    line-height: .6rem;
    border-bottom: 1px dashed #f2f2f2;
    overflow: hidden;
}
.section-content.info li input, .section-content.info li label, .section-content.info li span {
    display: block;
}
.section-content.info li label {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: .35rem;
    color: #333;
    font-weight: 700;
    float: left;
}
.section-content.info li span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: .37rem;
    color: #666;
    text-align: right;
    letter-spacing: 1px;
    float: right;
}
.section-content.info li span input {
    width: 100%;
    height: .6rem;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    float: left;
    color: #0085ff;
}
.section-content.info li span.red {
    color: #f07373;
}
.section-content.info li span.blue {
    color: #0085ff;
    font-weight: 700;
}
.section-content.info li {
    padding: .4rem 0;
    height: .6rem;
    line-height: .6rem;
    border-bottom: 1px dashed #f2f2f2;
    overflow: hidden;
}
.section-content.info li img {
    width: 24px;
    float: right;
}
.section-content.info li span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: .37rem;
    color: #666;
    text-align: right;
    letter-spacing: 1px;
    float: right;
}
.section-content.info li.payment span {
    width: 4rem;
    float: left;
}
.section-content.info li.payment span.iconBox {
    width: .6rem;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    position: relative;
}
.section-content.info li span i {
    color: #b8b8b8;
    font-size: .56rem;
}
.section-content.info li.payment span.iconBox i {
    font-size: .56rem;
    margin-left: -.15rem;
    color: #3eb94e;
}
.section-content.info li.payment label {
    width: 1.8rem;
    padding-left: .2rem;
    float: left;
}
.section-content.info li span.blue {
    color: #0085ff;
    font-weight: 700;
}
.section-content.info li.payment span.iptBox {
    width: 2.4rem;
    float: right;
}
.payCont {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 1.42rem;
    padding: .2rem;
    font-size: .44rem;
    color: #fff;
    background: #3c3c3c;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.payCont .left {
    width: 100%;
    height: 1.42rem;
    text-indent: .16rem;
    font-weight: 700;
    font-size: .37rem;
    text-align: center;
    overflow: hidden;
}
.payCont .right {
    width: 100%;
    height: 1.42rem;
    text-align: center;
    background: #44b549;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    letter-spacing: .1rem;
    color: hsla(0,0%,100%,.95);
    font-size: .48rem;
}
.payCont .right img {
    width: .6rem;
    margin-right: .1rem;
}
.section-content.info li.payment span.iptBox img{
  width: 24px;
  float: right;
}
</style>
